import React, {useCallback, useState, useEffect} from 'react';
import {Modal, Table, Button} from 'antd';
import {withRouter} from 'react-router-dom';
import './index.styl';
import CommonTable from '../../../common/CommonTable';


const operationColumns = columnProperty => ({
    key: 'operation',
    dataIndex: 'operation',
    title: '操作',
    width: '20%',
    render: (_, record) => (
        <Button
            href={`/liveMonitor/detail/${record[columnProperty]}`}
            type="link"
            className="read-btn"
        >
            查看
        </Button>
    ),
});

export default ({visible, setVisible, params}) => {
    const [loading, setLoading] = useState(true);

    const handleCancel = useCallback(() => {
        setVisible(false);
    }, [setVisible]);


    return (
        <Modal
            title="关联班级"
            visible={visible}
            footer={null}
            onCancel={handleCancel}
            className="related-class-modal"
            width={440}
        >
            <CommonTable
                title="关联班级"
                rowKey="直播间ID"
                searchParams={params}
                otherColumns={operationColumns}
                scroll={{
                    x: '100%',
                    y: '330px'
                }}
                size="small"
                className="related-class-table"
                loading={loading}
                setLoading={setLoading}
            />
        </Modal>
    );
};
